<template>
	<div class="monitorAll">
		<a-card hoverable style="width: 400px;height:370px;float:left;margin:0.3%;margin-bottom:0.5%;margin-top:0.2%">
    			<video id="my-video0"  slot="cover" alt="example" poster=""  data-setup="{'html5' : { 'nativeTextTracks' : false }}" preload="auto" controls style="width:400px;height:300px;"/>
    			<a-card-meta v-bind:title="this.pathList[0].num"></a-card-meta>
  		</a-card>
		<a-pagination v-model="current" :total="this.total" show-less-items :pageSize="this.pageSize" showQuickJumper style="float:right;margin-right:1%" @change="onChange"/>
	</div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'


export default {
	data(){
		return{
			current: 1,
			total:0,
			pageSize:6,
			pathList:[],
			pathData:[
				{	num:'501',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'502',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'503',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'504',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'505',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'506',
					path:'rtmp://192.168.31.47:1935/live'
				},

				{	num:'507',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'508',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'509',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'510',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'511',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'512',
					path:'rtmp://192.168.31.47:1935/live'
				},

				{	num:'513',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'514',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'515',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'516',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'517',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'518',
					path:'rtmp://192.168.31.47:1935/live'
				},
			]
		}
	},
	created(){
		this.total = this.pathData.length
		for(let i = 0;i<6;i++)
		{
			this.pathList[i] = this.pathData[this.pageSize*(this.current-1)+i]
		}	
		
	},
	mounted(){
		let myPlayer0 = videojs("my-video0");  //当前video标签的id
		let myPlayer1 = videojs("my-video1");
		let myPlayer2 = videojs("my-video2");
		let myPlayer3 = videojs("my-video3");
		let myPlayer4 = videojs("my-video4");
		let myPlayer5 = videojs("my-video5");
		myPlayer0.ready(
			function(){
			var myPlayer = this;
			myPlayer.src({
				type: "rtmp/flv",
				src:this.pathList[0].path//要播放的视频流url
			});
			myPlayer.play();  //播放
		});
		myPlayer1.ready(
			function(){
			var myPlayer = this;
			myPlayer.src({
				type: "rtmp/flv",
				src:this.pathList[1].path//要播放的视频流url
			});
			myPlayer.play();  //播放
		});
		myPlayer2.ready(
			function(){
			var myPlayer = this;
			myPlayer.src({
				type: "rtmp/flv",
				src:this.pathList[2].path//要播放的视频流url
			});
			myPlayer.play();  //播放
		});
		myPlayer3.ready(
			function(){
			var myPlayer = this;
			myPlayer.src({
				type: "rtmp/flv",
				src:this.pathList[3].path//要播放的视频流url
			});
			myPlayer.play();  //播放
		});
		myPlayer4.ready(
			function(){
			var myPlayer = this;
			myPlayer.src({
				type: "rtmp/flv",
				src:this.pathList[4].path//要播放的视频流url
			});
			myPlayer.play();  //播放
		});
		myPlayer5.ready(
			function(){
			var myPlayer = this;
			myPlayer.src({
				type: "rtmp/flv",
				src:this.pathList[5].path//要播放的视频流url
			});
			myPlayer.play();  //播放
		});		
	},
	destroyed(){
		let myPlayer0 = videojs("my-video0");  //当前video标签的id
		let myPlayer1 = videojs("my-video1");
		let myPlayer2 = videojs("my-video2");
		let myPlayer3 = videojs("my-video3");
		let myPlayer4 = videojs("my-video4");
		let myPlayer5 = videojs("my-video5");
		if(myPlayer0 !=null){ //判断是否已经初始化视频
    		myPlayer0.dispose(); //销毁video
		}
		if(myPlayer1 !=null){ //判断是否已经初始化视频
    		myPlayer1.dispose(); //销毁video
		}
		if(myPlayer2 !=null){ //判断是否已经初始化视频
    		myPlayer2.dispose(); //销毁video
		}
		if(myPlayer3 !=null){ //判断是否已经初始化视频
    		myPlayer3.dispose(); //销毁video
		}
		if(myPlayer4 !=null){ //判断是否已经初始化视频
    		myPlayer4.dispose(); //销毁video
		}
		if(myPlayer5 !=null){ //判断是否已经初始化视频
    		myPlayer5.dispose(); //销毁video
		}
		
	},
	methods:{
		onChange(){
			for(let i = 0;i<6;i++)
			{
				this.pathList[i] = this.pathData[this.pageSize*(this.current-1)+i]
			}	
		}
	}
};
</script>

<style lang="scss" scoped>
.monitorAll{
	width:99%;
	height:95%;
	margin-left:1%;
	margin-top:1%;
	overflow-y: scroll;
}
// img{
// 	width:16%;
// 	height:30%;
// 	margin:0.3%;
// 	margin-bottom: 3%;
// }
</style>